/*
 * @Author: kanglang
 * @Date: 2021-02-23 11:22:57
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-27 11:41:31
 * @Description: 企业信息中下拉选择item
 */

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View, PixelRatio, Image } from 'react-native';
import { px2dp, priceColor, fontColorDeepGray } from '@/styles';
import { iconRightGray } from '@/images';

const BusinessFormSelect = ({ label, defaultLabel = '请选择', value, onPress, disabled = false }) => {
  const handle = () => {
    onPress && onPress();
  };
  const formItem = (name) => {
    return (
      <>
        <Text style={{ color: priceColor }}>＊</Text>
        <Text style={{ color: fontColorDeepGray, fontSize: px2dp(28) }}>{name}</Text>
      </>
    );
  };
  return (
    <View style={styles.itemBox}>
      <View style={styles.labelBox}>{formItem(label)}</View>
      <TouchableOpacity
        style={styles.addressBox}
        onPress={disabled ? () => { } : handle}
      >
        <View style={styles.addressImgBox}>
          <Text
            numberOfLines={1}
            style={styles.addressText}
          >
            {value || defaultLabel}
          </Text>
          <Image style={styles.iconMore} source={iconRightGray} />
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default BusinessFormSelect;
const styles = StyleSheet.create({
  itemBox: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#ebebeb',
    width: '100%',
    height: 60,
  },
  labelBox: {
    flexDirection: 'row',
    alignItems: 'center',
    width: px2dp(200)
  },
  addressBox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: px2dp(10)
  },
  addressImgBox: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  },
  iconMore: {
    width: px2dp(24),
    height: px2dp(24),
    marginLeft: px2dp(16)
  },

  addressText: {
    color: '#b2b2b2',
    fontSize: px2dp(28),
    width: px2dp(430)
    // maxWidth: '80%'
  }
});
